﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="UserFavorite.aspx.cs" Inherits="UserFavorite" %>

<%@ Register Src="~/UserControl/UserPageLinkList.ascx" TagPrefix="uc1" TagName="UserPageLinkList" %>
<%@ Register Src="~/UserControl/UboxReader.ascx" TagPrefix="uc1" TagName="UboxReader" %><%--第一步--%>


<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style>
        #Tablefavorite th {
            background:#555555;
                color:#fff;
                /*border: 1px solid #000000;*/
                text-align: center;
                /*padding-top:5px;
                padding-bottom:5px;*/
        }
                .table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
  background-color: #eee;
}
        .table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color:#66CCFF;
  color:#fff;
}
        #BHPagination {
                text-align: center;
        }
        #keyword {
                        display:none;
                    }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
    <style>
        /*css測試區*/
    </style>


    <div class="user-page-container">
        <div class="link-list-container">
            <uc1:UserPageLinkList runat="server" ID="UserPageLinkList1" />
        </div>
        <div class="content-page-container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>&nbsp;<i class="glyphicon glyphicon-heart"></i>&nbsp;<strong>我的最愛</strong></h4>
                </div>
                <div class="panel-body">
                    <%--編輯區--%>
                    <table id="Tablefavorite" class="TablePagination table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>編號</th>
                            <th>日期</th>
                            <th >標題</th>
                            <th>瀏覽文章</th>
                        </tr></thead>
                    </table> 
                </div>
                                <div id="BHPagination" class="DivPagination"><ul id="BHpagination"class="pagination pagination-sm"></ul></div>
            </div>
            </div>
    </div>
    
    <%--客製參考--%>
    <link href="Content/Pagination.css" rel="stylesheet" />
    <link href="Content/UserFavorite.css" rel="stylesheet" />
    <script src="Scripts/UserFavorite.js"></script>
    <script src="Scripts/Article.js"></script>
    <%--客製參考--%>
    
    <script>
        $(function () {
            var PaginationPAGEROW = 20;
            var PaginationItem = 5;
            var PaginationUlId = "BHpagination";
            var PaginationSpan = "BHPaginationSpan";
            var PaginationTable = "Tablefavorite";
            var Ajax = "./Handler/HandlerUserFavorite.ashx";
            var AjaxType = 2;
            /*讀取瀏覽紀錄用*/
            var ArticleSpanId = "Article";
            var TriggerReadArticleContainer = "Tablefavorite";
            var TriggerReadArticleButton = "Article";
            /*文章隱藏*/
            $('.black-container').hide();
            /*瀏覽文章事件*/
            $("#" + TriggerReadArticleContainer).unbind().on("click", "." + TriggerReadArticleButton, function (event) {
                var ArticleId = this.id.substr(ArticleSpanId.length);
                ReadArticleAllevents(ArticleId, this.id);
            });
            /*文章隱藏*/
            /*分頁選單初始化*/
            Pagination(
                PaginationSpan + "1"
                , PaginationPAGEROW
                , PaginationUlId
                , PaginationSpan
                , PaginationTable
                , PaginationItem
                , Ajax
                , AjaxType);
            /*分頁選單Clicke選單與表更新*/
            PaginationClick(
                PaginationUlId
                , PaginationSpan
                , PaginationTable
                , PaginationPAGEROW
                , PaginationItem
                , Ajax
                , AjaxType
                , TriggerReadArticleButton
                , ArticleSpanId);
            /*讀取瀏覽紀錄*/
            UserFavorite(1, PaginationPAGEROW, PaginationTable, TriggerReadArticleButton, ArticleSpanId);
            /*選單特效*/
            $(".TablePagination").on("mouseenter", "tbody tr", function () {
                $(this).css("background-color", "rgba(255,30,50,0.2)");
            });
            $(".TablePagination").on("mouseleave", "tbody tr", function () {
                $(this).css("background-color", "white");
            });
            function UserFavorite(PageNum, Pagination, PaginationTable, TriggerReadArticleButton, ArticleSpanId) {
                $.ajax({
                    url: "./Handler/HandlerUserFavorite.ashx"
                    , type: "post"
                    , data: "type=1"
                        + "&PageNum=" + PageNum
                        + "&Pagination=" + Pagination
                    , success: function (data) {
                        var i = 1;
                        $.each(data, function (name, value) {
                            $.each(value, function () {
                                /*回傳===========================================*/
                                $("#" + PaginationTable).append("<tr id='tr" + i + "'><td>" + (i + (PageNum - 1) * Pagination) + "</td><td>"
                                    + this.date + "</td><td>"
                                    + this.title + "</td><td><span class='" + TriggerReadArticleButton + "' id=" + ArticleSpanId
                                    + this.aid + ">瀏覽文章</sapn></td></tr>");
                                $("#tr" + i).hide().delay(i * 25).fadeIn(500);
                                /*回傳===========================================*/
                                i++;
                            });
                        });
                        /*successEnd===========================================*/
                    }
                });
            }
            /*分頁*/
            function Pagination(CurrentlyPage, Row, PaginationUlId, PaginationSpan, PaginationTable, SpanNum, URL, AjaxType) {
                //現在頁數,每頁幾列,裝載分頁DIV ID,裝載數字SPAN ID,分頁目標名稱,分頁選單數(一定要奇數,最小3),取資料筆數URL
                $.ajax({/*取資料筆數*/
                    url: URL
                    , type: "post"
                    , data: "type=" + AjaxType
                    , success: function (data) {
                        $.each(data, function (name, value) {
                            $.each(value, function () {
                                /*回傳===========================================*/
                                /*參數準備*/
                                var CurrentlyPage2 = parseInt(CurrentlyPage.substr(PaginationSpan.length));
                                //CurrentlyPage目前所在頁數,避免傳字串parseInt()
                                var TableRows = Row;  // 每頁要顯示幾列
                                var DBDataNum = this.num; // 資料筆數
                                var TablePages = Math.floor(DBDataNum / TableRows);// 計算頁數
                                var mod = DBDataNum % TableRows; // 餘數
                                if (mod > 0) { TablePages++; } // 不能整除
                                if (CurrentlyPage2 == 0) { CurrentlyPage2 = TablePages }//最後一頁處理
                                if (CurrentlyPage2 == -1) { CurrentlyPage2 = 1 }//第一頁處理
                                /*選單計算*/
                                if (CurrentlyPage2 - (SpanNum - 1) / 2 > 0) {
                                    var StartItem = CurrentlyPage2 - (SpanNum - 1) / 2;
                                }
                                else {
                                    var StartItem = 1;
                                }
                                if ((CurrentlyPage2 + (SpanNum - 1) / 2 <= TablePages) && ((CurrentlyPage2 + (SpanNum - 1) / 2) > 0)) {
                                    var EndItem = CurrentlyPage2 + (SpanNum - 1) / 2;
                                }
                                else {
                                    var EndItem = TablePages;
                                }
                                /*實作選單*/
                                $('#' + PaginationUlId).append('<li id=' + PaginationSpan + '-' + 1 + '>' + '<a>' + '首頁' + '</a>' + '</li>').fadeIn(500);
                                for (i = StartItem; i <= EndItem; i++) {
                                    $('#' + PaginationUlId).append('<li id=' + PaginationSpan + i + '>' + '<a>' + i + '</a>' + '</li>').fadeIn(500);
                                }
                                $('#' + PaginationUlId).append('<li id=' + PaginationSpan + 0 + '>' + '<a>' + '最後一頁' + '</a>' + '</li> ').fadeIn(500);
                                $('#' + PaginationSpan + CurrentlyPage2).css('color', 'red');

                                /*回傳===========================================*/
                            });
                        });
                        /*successEnd===========================================*/
                    }
                });
            }
            function PaginationClick(PaginationUlId, PaginationSpan, PaginationTable, Row, SpanNum, URL, AjaxType, TriggerReadArticleButton, ArticleSpanId) {
                $.ajax({/*取資料筆數*/
                    url: URL
                    , type: "post"
                    , data: "type=" + AjaxType
                    , success: function (data) {
                        $.each(data, function (name, value) {
                            $.each(value, function () {
                                /*回傳===========================================*/
                                /*參數準備*/
                                //CurrentlyPage目前所在頁數,避免傳字串parseInt()
                                var TableRows = Row;  // 每頁要顯示幾列
                                var DBDataNum = this.num; // 資料筆數
                                var TablePages = Math.floor(DBDataNum / TableRows);// 計算頁數
                                var mod = DBDataNum % TableRows; // 餘數
                                if (mod > 0) { TablePages++; } // 不能整除
                                $('#' + PaginationUlId).on("click", "li", function (event) {
                                    var ClickPage = this.id.substr(PaginationSpan.length);
                                    if (ClickPage == 0) { ClickPage = TablePages }//最後一頁處理
                                    if (ClickPage == -1) { ClickPage = 1 }//第一頁處理
                                    $("#" + PaginationTable + " tbody").html("");
                                    $('#' + PaginationUlId).html("");
                                    UserFavorite(ClickPage, Row, PaginationTable, TriggerReadArticleButton, ArticleSpanId);/*每個分頁唯一要改---------------*/
                                    Pagination(
                                    this.id
                                    , Row
                                    , PaginationUlId
                                    , PaginationSpan
                                    , PaginationTable
                                    , SpanNum
                                    , URL
                                    , AjaxType
                                    );
                                    return false;
                                });
                                /*回傳===========================================*/
                            });
                        });
                        /*successEnd===========================================*/
                    }
                });
            }

            //讀取資料庫資料 放入表格
            //    $.ajax({
            //    url: "./Handler/HandlerUserFavorite.ashx"
            //    , type: "post"
            //    , data: "type=1"
            //    , success: function (data) {
            //        $.each(data, function (name, value) {
            //            $.each(value, function () {
            //                /*回傳===========================================*/

            //                $("#Tablefavorite").append("<tr><td>"+""+"</td><td>" + this.date + "</td><td>" + this.title + "</td><td>" +""+ "</td></tr>");

            //                /*回傳===========================================*/
            //            })
            //        })
            //    }
            //});
        

        })



   
   </script>
      <style>
        .noscroll { position: fixed; overflow-y:scroll }
    </style>
    <style>
        /*#tablefavorite {
        width:100%;
         height:50px;
         border:1px solid #000000;
        }
            #tablefavorite td {
            border:1px solid #000;
             text-align:center;
            }*/
    </style>
    <uc1:UboxReader runat="server" ID="UboxReader" /><%--第二步--%>
</asp:Content>

